<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我的评论1</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../plugins/mui/mui.min.css">
		<script src="../../js/statistics.js"></script>
		<style type="text/css">
			 *{
            box-sizing: border-box;
            font-family: 'Microsoft YaHei',"微软雅黑";

	        }
	        body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form,  input, p, table, th, td ,select,option{
	            padding: 0;
	            margin: 0;
	            list-style: none;
	        }
	        body{
	        		
	        }
	        .mui-table-view:before{
	        	display:none;
	        }
	        .mui-table-view:after{
	        	display:none;
	        }
	        #list{
	        	background-color:transparent;
	        	/*min-height: 100vh;*/
	        }
	        
			#list >li{
				
				background-color:#fff;
				margin-bottom:10px;
				padding-top:0px;
				padding-bottom:0px;
				padding-left:0;
				padding-right:0;
				position:relative;
			}
			#list >li>div.mui-slider-handle{
				width:100%;
				height:85px;
				position:relative;
				/*padding-left:2.6%;*/
				padding-right:2.6%;
				/*padding-top:10px;*/
				padding-bottom:10px;
				
			}
			#list >li>div.mui-slider-handle>p{
				float:left;
				width:65px;
				height:65px;
				background: url('') no-repeat center center;
				background-size:cover;
			}
			
			#list >li>div.mui-slider-handle>div{
				float:left;
				height:65px;
				/*width:calc( 100% - 2.6% - 75px);*/
				position: absolute;
				left:65px;
				background-color:#F7F7F7;
				padding:10px;
			}
			#list >li>div.mui-slider-handle>div.none{
				float:left;
				height:65px;
				/*width:calc( 100% - 2.6%);*/
				position: absolute;
				left:0;
			}
			#list >li>div.mui-slider-handle>div>p{
				position:absolute;
				top: 50%;
				-webkit-transform: translateY(-50%) ;
				font-size:13px;
				color:#999;
				overflow : hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				word-break:break-all;
				padding-right:10px;
				line-height: 18px;
			}
			#list >li>div.mui-slider-handle>div>span{
				position:absolute;
				right:10px;
				bottom:4px;
				font-size: 11px;
				color:#999;
				line-height: 11px;
			}

			.mui-table-view-cell:after{
				
				display:none;
			}
			/*.mui-pull{
				display:none;
			}*/
			
			.mui-btn-red{
				font-size:15px;
				background-color:#ee3b30;
			}
			.context{
				font-size:15px;
				/*padding-left:2.6%;*/
				padding-right:2.6%;
				padding-top:10px;
				/*position:relative;*/
				line-height: 17px;
				padding-bottom: 10px;
				
			}
			.mui-table-view-cell{
				padding-left:18.9%!important;
			}
			.timer{
				position: absolute;
				left:0;
				font-size:17px;
				color:#333;
				/*padding:12px;*/
				width:18.9%;
				padding-top:10px;
				text-align: center;
				line-height: 17px;
			}
			.timer>span{
				font-size:11px;
				color:#999;
			}
			#list>li:first-child{
				margin-top:0;
			}
			/*//空数据*/
			.kong{
				position:absolute;
				width:40%;
				top: 50%;
				left:50%;
				-webkit-transform: translateY(-50%) translateX(-50%);
				display:none;
				margin-top:-47px;
			}
			.kong>img{
				width:100%;
			}
		</style>
	</head>
	<body>
		<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
		  <div class="mui-scroll">
		    <!--数据列表-->
		    <ul class="mui-table-view mui-table-view-chevron"  id='list'>


				<!--<li class="mui-table-view-cell "data-id='+p+'>
						<div class='timer'>
							03/01
		    				<br/>
		    				<span>星期一</span>
		    			</div>
		    			<div class="context">你猜菜鸟</div>
						<div class="mui-slider-handle">
							<p style='background-image: url(../../images/ce1.jpg);'></p>
							<div class="none">
			    				<p>世界之大无奇不有</p>
			    				<span>2017-02-01 14:25</span>
			    			</div>
						</div>
				</li>-->


		    </ul>
		    <div class='kong'>
				<img src="../../images/my/index/null.png" alt="" />
			</div>	
		  </div>
		</div>
		<script type="text/javascript" src='../../plugins/jquery/jquery-3.1.0.min.js'></script>
		<script src="../../plugins/mui/mui.min.js"></script>
		<script src="../../js/getApiToken.js"></script>
		<script src="../../js/md5.js"></script>
		<!--<script type="text/javascript" src="../plugins/mui/update.js"></script>-->
		<script type="text/javascript">
			var first=0;
			mui.init({
			  pullRefresh : {
			    container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
			     up : {
				      height:50,//可选.默认50.触发上拉加载拖动距离
				      auto:false,//可选,默认false.自动上拉加载一次
				      contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
				      contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
				      callback :function pullfresh() {
				      	if(true){
				      		myAjax('card/card/getUserComment', 'get', {
								'user_id': plus.storage.getItem('cg_user_id'),
								'user_token': plus.storage.getItem('cg_user_token'),
								'page_cnt':3,
								'update_time':updateTime
							}, function(data) {
								updateTime=data.update_time;
								if(data.success){
									if(data.data.length<3){
										mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
									}else{
										mui('#refreshContainer').pullRefresh().endPullupToRefresh(false);
									}
									for(var i=0;i<data.data.length;i++){
										var a=add(data.data[i].nickname,data.data[i].headimgurl,data.data[i].update_time,data.data[i].content,data.data[i].path,data.data[i].title,data.data[i].update_time,data.data[i].article_id);
										$('#list').append(a);
									}
									calc();
								}else{
									mui.toast(data.error_msg);
								}
							})
				      	}
						  first++;  
					 }
				   } 
				}
			});
			var updateTime;//第二次ajax用来取数据
			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				if(self.height){
					$('#list').css({'minHeight':self.height-95+'px'});
				}
				$('#list').delegate('li','tap',function(){
					//帖子跳转
					if($(this).attr('data-id')){
					mui.openWindow({
						url: '../city/tribune_detail.html',
						id: '../city/tribune_detail.html',
						show: {
							autoShow: false, //页面loaded事件发生后自动显示，默认为true
							duration: 200 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
						},
						waiting: {
							title: '正在加载...' //等待对话框上显示的提示内容
						},
						extras:{
							'article_id':$(this).attr('data-id')  //扩展参数
						}
					})
					}
				})
				
			
			//刚进来自动获取8条数据
			plus.nativeUI.showWaiting();
			 myAjax('card/card/getUserComment', 'get', {
					'user_id': plus.storage.getItem('cg_user_id'),
					'user_token': plus.storage.getItem('cg_user_token'),
					'page_cnt':5
				}, function(data) {
					plus.nativeUI.closeWaiting();
					if(data.success){
						console.dir(data.data+'');
						updateTime=data.update_time;
						if(!data.data.length){
							$('.kong').show();
						}
						if(data.data.length<5){
							mui('#refreshContainer').pullRefresh().disablePullupToRefresh();
						}
						for(var i=0;i<data.data.length;i++){
							console.log(data.data[i].update_time);
							var a=add(data.data[i].nickname,data.data[i].headimgurl,data.data[i].update_time,data.data[i].content,data.data[i].path,data.data[i].title,data.data[i].update_time,data.data[i].article_id);
							$('#list').append(a);
						}
						calc();
					}else{
						mui.toast(data.error_msg);
					}
			})
		});
		//a1用户昵称 a2用户头像 a3 评论时间 a4 评论内容
			function add(a1,a2,a3,a4,a,b,d,p){
				if(a){
					var a="<p style='background-image: url("+(_baseUrl+a)+");'></p>";
					var y='';
				}else{
					var a='';
					var y='none';
				}
				var o=new Date(a3.substring(0,4),a3.substring(5,7)-1,a3.substring(8,10)); 
				console.log(o)
				var day=o.getDay(); 
				if (day == 5)day="星期五 " ;
				if (day == 6)day="星期六 " ;
				if (day == 0)day="星期日 " ;
				if (day == 1)day="星期一 " ;
				if (day == 2)day="星期二 " ;
				if (day == 3)day="星期三 " ;
				if (day == 4)day="星期四 " ;
//				var d='<span>'+d+'</span>';
			return '<li class="mui-table-view-cell "data-id='+p+'>'+
						"<div class='timer'>"+
		    				a3.substring(5,7)+'/'+a3.substring(8,10)+'<br/>'+
		    				'<span>'+day+'</span>'+
		    			'</div>'+
		    			'<div class="context">'+a4+'</div>'+
						'<div class="mui-slider-handle">'+
							a+
							'<div class="'+y+'">'+
			    				'<p>'+b+'</p>'+
//			    				d+
			    			'</div>'+
						'</div>'+
				'</li>'
			}
			
			//适配CSScalc函数
			function calc(){
				$('#list>li>div.mui-slider-handle>div').css({'width':document.body.clientWidth*0.811*0.974 -75+'px'});	
				$('#list >li>div.mui-slider-handle>div.none').css({'width':document.body.clientWidth*0.811*0.974+'px'});
			}
		</script>
	</body>
</html>
